<template>
  <div class="oo">
    <van-nav-bar title="我的订制" left-text="返回" left-arrow @click-left="back"> </van-nav-bar>
    <van-tabs sticky swipeable @change="change" v-model="active">
      <van-tab title="全部">
        <div class="made" v-for="(item, i) of customList" :key="i" @click="made(item.cid)">
          <!-- 图 -->
          <div>
            <van-image fit="contain" src="http://www.zdmeeting.com/upload_img/image/202012/1608867119339775.jpg" />
          </div>
          <!-- 文字 -->
          <div class="made-1">
            <span>订制状态:&ensp;&ensp; </span>
            <p>{{ item.statu | statu }}</p>
            <br />
            <span>目的地:&ensp;&ensp; </span>
            <p>{{ item.destination }}</p>
            <br />
            <span>联系电话:&ensp;&ensp;</span>
            <p>{{ item.phone }}</p>
            <br />
            <span>需求: &ensp;&ensp;</span>
            <div class="made-2">
              <p class="made-3">{{ item.demand }}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已提交">
        <div class="made" v-for="(item, i) of statuList" :key="i" @click="made(item.cid)">
          <!-- 图 -->
          <div>
            <van-image fit="contain" src="http://www.zdmeeting.com/upload_img/image/202012/1608867119339775.jpg" />
          </div>
          <!-- 文字 -->
          <div class="made-1">
            <span>目的地:&ensp;&ensp; </span>
            <p>{{ item.destination }}</p>
            <br />
            <span>联系电话:&ensp;&ensp;</span>
            <p>{{ item.phone }}</p>
            <br />
            <span>需求: &ensp;&ensp;</span>
            <div class="made-2">
              <p class="made-3">{{ item.demand }}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已确认">
        <div class="made" v-for="(item, i) of statuList" :key="i" @click="made(item.cid)">
          <!-- 图 -->
          <div>
            <van-image fit="contain" src="http://www.zdmeeting.com/upload_img/image/202012/1608867119339775.jpg" />
          </div>
          <!-- 文字 -->
          <div class="made-1">
            <span>目的地:&ensp;&ensp; </span>
            <p>{{ item.destination }}</p>
            <br />
            <span>联系电话:&ensp;&ensp;</span>
            <p>{{ item.phone }}</p>
            <br />
            <span>需求: &ensp;&ensp;</span>
            <div class="made-2">
              <p class="made-3">{{ item.demand }}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已出行">
        <div class="made" v-for="(item, i) of statuList" :key="i" @click="made(item.cid)">
          <!-- 图 -->
          <div>
            <van-image fit="contain" src="http://www.zdmeeting.com/upload_img/image/202012/1608867119339775.jpg" />
          </div>
          <!-- 文字 -->
          <div class="made-1">
            <span>目的地:&ensp;&ensp; </span>
            <p>{{ item.destination }}</p>
            <br />
            <span>联系电话:&ensp;&ensp;</span>
            <p>{{ item.phone }}</p>
            <br />
            <span>需求: &ensp;&ensp;</span>
            <div class="made-2">
              <p class="made-3">{{ item.demand }}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <div class="made" v-for="(item, i) of statuList" :key="i" @click="made(item.cid)">
          <!-- 图 -->
          <div>
            <van-image fit="contain" src="http://www.zdmeeting.com/upload_img/image/202012/1608867119339775.jpg" />
          </div>
          <!-- 文字 -->
          <div class="made-1">
            <span>目的地:&ensp;&ensp; </span>
            <p>{{ item.destination }}</p>
            <br />
            <span>联系电话:&ensp;&ensp;</span>
            <p>{{ item.phone }}</p>
            <br />
            <span>需求: &ensp;&ensp;</span>
            <div class="made-2">
              <p class="made-3">{{ item.demand }}</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已取消">
        <div class="made" v-for="(item, i) of statuList" :key="i" @click="made(item.cid)">
          <!-- 图 -->
          <div>
            <van-image fit="contain" src="http://www.zdmeeting.com/upload_img/image/202012/1608867119339775.jpg" />
          </div>
          <!-- 文字 -->
          <div class="made-1">
            <span>目的地:&ensp;&ensp; </span>
            <p>{{ item.destination }}</p>
            <br />
            <span>联系电话:&ensp;&ensp;</span>
            <p>{{ item.phone }}</p>
            <br />
            <span>需求: &ensp;&ensp;</span>
            <div class="made-2">
              <p class="made-3">{{ item.demand }}</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<style lang="scss">
.oo {
  .van-nav-bar__text {
    font-size: 14px;
    color: #000;
  }
  .van-icon-arrow-left {
    color: #000;
  }
  .made {
    background-color: #f9f9f9;
    padding: 20px;
    margin-bottom: 2%;
    display: flex;
    .van-image__img {
      margin-top: 20%;
      width: 2.35rem;
      border-radius: 20px;
    }
    div {
      display: block;
    }
    .made-1 {
      margin: 0 10px;
      .made-2 {
        height: 60px;
        width: 240px;
        overflow: hidden;
        .made-3 {
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3; /* 可以显示的行数，超出部分用...表示*/
          -webkit-box-orient: vertical;
        }
      }
      p {
        display: inline-block;
        font-size: 15px;
        padding-bottom: 5px;
      }
      span {
        font-size: 16px;
        text-align: center;
        color: #918682;
      }
    }
  }
}
</style>
<script>
import { getCustom } from '../server/user.js';
import { getCustomDtails } from '../server/order.js';
export default {
  data() {
    return {
      active: 0,
      token: localStorage.getItem('token'), //token
      customList: [], //保存所有订制订单
      statuList: [], //保存不同状态下的订制订单
      detailsList: {},
    };
  },
  mounted() {
    getCustom(this.token)
      .then((result) => {
        this.customList = result;
        this.customList.reverse();
      })
      .catch(() => {
        this.$toast.fail('暂无订单');
      });
  },
  methods: {
    // 切换订单状态
    change(active) {
      if (active != 0) {
        this.statuList = [];
        for (var item of this.customList) {
          if (item.statu == active) {
            this.statuList.unshift(item);
          }
        }
        if (this.statuList.length == 0) {
          this.$toast.fail('暂无订单');
        }
      }
    },
    async made(cid) {
      await getCustomDtails(cid).then((result) => {
        for (var key in result[0]) {
          if (result[0][key]) {
            this.detailsList[key] = result[0][key];
          }
        }
        if (this.detailsList.start_time) {
          this.detailsList.start_time = this.moment(this.detailsList.start_time).format('YYYY-MM-DD');
        }
      });
      this.$dialog
        .alert({
          title: '订制详情',
          confirmButtonColor: '#63c6c2',
          message: `<p>联系方式:  ${this.detailsList.phone || '暂无'}</p > 
                    <p>目的地:  ${this.detailsList.destination || '暂无'}</p > 
                    <p>出发日期:  ${this.detailsList.start_time || '暂无'}</p >
                    <p>出行人数:  ${this.detailsList.people ? this.detailsList.people + '人' : '暂无'}</p > 
                    <p>游玩天数:  ${this.detailsList.days ? this.detailsList.days + '天' : '暂无'}</p >
                    <p>人均费用:  ${this.detailsList.ones_price ? '¥ ' + this.detailsList.ones_price + '元' : '暂无'}</p >
                    <p>备注:  ${this.detailsList.demand || '暂无'}</p >
                    `,
          messageAlign: 'left',
        })
        .then(() => {});
    },
    back() {
      this.$router.back();
    },
  },
  // 过滤器
  filters: {
    //订单状态过滤器
    statu(oldVal) {
      switch (oldVal) {
        case 1:
          return '已提交需求';
        case 2:
          return '已确认方案';
        case 3:
          return '已安排出行';
        case 4:
          return '已完成订制';
        case 5:
          return '已取消订制';
      }
    },
  },
};
</script>
